<template>
    <el-container>
        <el-header>
            <el-dropdown trigger="click">
                      <span class="el-dropdown-link">
                        <el-avatar :src=imgUrl></el-avatar>
                      </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-plus">个人中心</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-circle-plus"><span @click="logOut">退出登录</span></el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        background-color="#545c64"
                        text-color="#fff"
                        unique-opened="unique-opened"
                        router="router"
                        active-text-color="#ffd04b">
                    <!-- 一级菜单 -->
                    <el-submenu :index="parent.mid+''" v-for="parent in leftMenus">
                        <!-- 一级菜单模板 -->
                        <template slot="title">
                            <!-- 图标 -->
                            <i :class=parent.micon></i>
                            <!-- 文本 -->
                            <span>{{parent.mname}}</span>
                        </template>
                        <!-- 二级子菜单 -->
                        <el-menu-item :index="child.murl" v-for="child in parent.childMenu">
                            <!-- 二级菜单模板 -->
                            <template slot="title">
                                <!-- 图标 -->
                                <i :class="parent.micon"></i>
                                <!-- 文本 -->
                                <span>{{child.mname}}</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-main>
                    <router-view/>
                </el-main>
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        name: "home",
        data() {
            return{
                leftMenus:[],
                imgUrl:""
            }
        },
        created() {
            var that = this;
            this.$http.get("http://localhost:8008/menu/getMenu").then(function (result) {
                that.leftMenus = result.data.data;
                console.log(that.leftMenus)
            })
            that.imgUrl=window.sessionStorage.getItem("imgUrl")
        },
        methods:{
            logOut() {
                window.sessionStorage.clear()
                this.$router.push('/login')
            }
        }
    }
</script>

<style scoped>
    body {
        margin: 0px;
        padding: 0px;
    }
    .el-container{
        height: 100%;
        width: 100%;
    }
    .el-header, .el-footer {
        background-color: #7e8ea1;
        color: #333;
        text-align: right;
        line-height: 50px;
    }

    .el-aside {
        background-color: #545c64;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
    }
    .el-avatar{
        margin-top: 10px;
    }
    .el-dropdown-menu{
        margin-top: 50px;
    }
</style>